<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{$t("基本信息")}}</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">{{$t('Coupon_ID')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('Name')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('Coupon_type')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('Lowest_spending_value')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('折扣类型')}}</el-col>
          <el-col :span="4" class="table-cell-title">
            <span v-if="coupon.discountType == 1">
              {{$t('优惠面值')}}
            </span>
            <span v-else>
              {{$t('优惠折扣')}}
            </span>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{ coupon.id }}</el-col>
          <el-col :span="4" class="table-cell">{{ coupon.name }}</el-col>
          <el-col :span="4" class="table-cell">{{ formatType(coupon.type) }}</el-col>
          <el-col :span="4" class="table-cell">{{$t('Full')}}{{ coupon.min }}元可用</el-col>
          <el-col v-if="coupon.discountType == 1" :span="4" class="table-cell">
            <el-tag>{{$t('满减')}}</el-tag>
          </el-col>
          <el-col v-else :span="4" class="table-cell">
            <el-tag>{{$t('百分比')}}</el-tag>
          </el-col>
          <el-col :span="4" class="table-cell">
            <span v-if="coupon.discountType == 1">
              {{$t('Discount')}}{{ coupon.discount }}{{$t('Dollars')}}
            </span>
            <span v-else>
              {{$t('折扣')}}{{ coupon.discountRate }}{{$t('%')}}
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="table-cell-title">{{$t('Current_status')}}</el-col>
          <el-col :span="3" class="table-cell-title">{{$t('商品范围')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('有效期')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('优惠兑换码')}}</el-col>
          <el-col v-if="coupon.type == 3" :span="3" class="table-cell-title">{{$t('剩余数量')}}</el-col>
          <el-col v-else :span="3" class="table-cell-title">{{$t('发行数量')}}</el-col>
          <el-col :span="4" class="table-cell-title">{{$t('与商品活动价共用')}}</el-col>
          <el-col v-show="coupon.type == 3" :span="3" class="table-cell-title">{{$t('优惠券码')}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="table-cell">{{ formatStatus(coupon.status) }}</el-col>
          <el-col :span="3" class="table-cell">{{ formatGoodsType(coupon.goodsType) }}</el-col>
          <el-col :span="4" class="table-cell" :title="getTimeScope()">{{ getTimeScope() }}</el-col>
          <el-col :span="4" class="table-cell">{{ coupon.code }}</el-col>
          <el-col v-if="coupon.type == 3" :span="3" class="table-cell">{{coupon.surplus}}</el-col>
          <el-col v-else :span="3" class="table-cell">{{ coupon.total === 0 ? this.$t('不限') : coupon.total }}</el-col>
          <el-col :span="4" class="table-cell">
            {{coupon.promotionOnly == 0 ? this.$t('共用') : this.$t('不共用')}}
          </el-col>
          <el-col v-show="coupon.type == 3" :span="3" class="table-cell">
            <el-button type="primary" @click="handleQrcode">{{$t('查看')}}</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="table-cell-title">{{$t('Explanation')}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="table-cell">{{coupon.useInstruction}}</el-col>
        </el-row>
      </div>
    </el-card>
    <el-card v-if="coupon.goodsType == 2">
      <div slot="header" class="clearfix">
        <span>{{$t('指定商品')}}</span>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="listGoodsLoading" :data="goodsList" :element-loading-text="$t('Searching')" border fit
                highlight-current-row>
        <el-table-column align="center" :label="$t('Store_belong')" prop="shopName">
        </el-table-column>
        <el-table-column align="center" :label="$t('Merchandise_name')" prop="name"/>
        <el-table-column align="center" :label="$t('Merchandise_code')" prop="goodsSn"/>

      </el-table>

      <pagination v-show="goodsTotal>0" :total="goodsTotal" :page.sync="listGoodsQuery.page"
                  :limit.sync="listGoodsQuery.limit" @pagination="getGoodsList"/>
    </el-card>

    <el-card v-if="coupon.goodsType == 1">
      <div slot="header" class="clearfix">
        <span>{{$t('指定类目列表')}}</span>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="listGoodsLoading" :data="goodsList" :element-loading-text="$t('Searching')" border fit
                highlight-current-row>
        <el-table-column align="center" :label="$t('Category_Name')" prop="name"/>
      </el-table>

      <pagination v-show="goodsTotal>0" :total="goodsTotal" :page.sync="listGoodsQuery.page"
                  :limit.sync="listGoodsQuery.limit" @pagination="getCategoryList"/>
    </el-card>


    <el-card v-if="coupon.areaLimit == 1">
      <div slot="header" class="clearfix">
        <span>{{$t('限制地区列表')}}</span>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="listRegionsLoading" :data="regionsList" :element-loading-text="$t('Searching')" border fit highlight-current-row>
        <el-table-column align="center" :label="$t('Regions_Name')" prop="nameEn"/>
      </el-table>

      <pagination v-show="regionsTotal>0" :total="regionsTotal" :page.sync="listRegionsQuery.page" :limit.sync="listRegionsQuery.limit" @pagination="getRegionList" />
    </el-card>


    <!-- 回复反馈对话框 -->
    <el-dialog :visible.sync="qrcodeDialogVisible" :title="$t('优惠券码')">
      <div align="center" @click="">
        <div style="font-size:25px">{{ this.Code }}</div>
        <div id="qrcode" ref="qrcode"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { readCoupon, listCouponUser, listCouponGoods, couponStatistics, listCouponCategory } from '@/api/coupon'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import { allForPerm } from '@/api/shop'
  import QRCode from 'qrcodejs2'
  import { listCouponRegions } from '../../api/coupon'

  export default {
    name: 'extenCouponDetail',
    components: { Pagination, QRCode },
    filters: {},
    data() {
      const defaultTypeOptions = [
        {
          label: this.$t('电子优惠券'),
          value: 1
        },
        {
          label: this.$t('实体优惠券'),
          value: 2
        }, {
          label: this.$t('推广优惠券'),
          value: 3
        }
      ]

      const defaultUseStatusOptions = [
        {
          label: this.$t('未使用'),
          value: 0
        },
        {
          label: this.$t('已使用'),
          value: 1
        },
        {
          label: this.$t('Expired'),
          value: 2
        },
        {
          label: this.$t('Merchandise_removed'),
          value: 3
        }
      ]

      return {
        defaultTypeOptions,
        defaultUseStatusOptions,
        typeOptions: Object.assign({}, defaultTypeOptions),
        useStatusOptions: Object.assign({}, defaultUseStatusOptions),
        coupon: {},
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          couponId: 0,
          userId: undefined,
          status: undefined,
          sort: 'add_time',
          order: 'desc',
          shopId: undefined
        },
        goodsList: [],
        regionsList: [],
        goodsTotal: 0,
        regionsTotal: 0,
        listGoodsLoading: true,
        listRegionsLoading: false,
        listGoodsQuery: {
          page: 1,
          limit: 20,
          id: 0,
          sort: 'add_time',
          order: 'desc'
        },
        listRegionsQuery: {
          page: 1,
          limit: 20,
          id: 0,
          sort: 'add_time',
          order: 'desc'
        },
        downloadLoading: false,
        shops: [],
        statistics: {},
        qrcodeDialogVisible: false,
        qrcodeData: undefined,
        Code:undefined,
      }
    },
    async created() {
        await this.init()
      if (this.$route.query.id == null) {
        return
      }
      this.listGoodsQuery.id = this.$route.query.id
      this.listRegionsQuery.id = this.$route.query.id
      if(this.coupon.goodsType == 2){

        await this.getGoodsList()
      }else if( this.coupon.goodsType == 1){

        await this.getCategoryList()

      }
      await this.getRegionList()
      couponStatistics({
        id: this.listGoodsQuery.id,
        shopId: this.listQuery.shopId,
        startTime: this.listQuery.startTime,
        endTime: this.listQuery.endTime
      }).then(response => {
        this.statistics = response.data.data
      })
      allForPerm().then(response => {
        this.shops = response.data.data.list
      })

    },
    mounted() {

    },
    methods: {
      formatType(type) {
        for (let i = 0; i < this.defaultTypeOptions.length; i++) {
          if (type === this.defaultTypeOptions[i].value) {
            return this.defaultTypeOptions[i].label
          }
        }
        return ''
      },
      formatGoodsType(goodsType) {
        if (goodsType === 0) {
          return this.$t('Usable_in_any_situation')
        } else if (goodsType === 1) {
          return this.$t('Select_category')
        } else {
          return this.$t('Select_merchandise')
        }
      },
      formatStatus(status) {
        if (status === 0) {
          return this.$t('正常')
        } else if (status === 1) {
          return this.$t('已上架')
        } else {
          return this.$t('已下架')
        }
      },
      formatUseStatus(status) {
        if (status === 0) {
          return this.$t('未使用')
        } else if (status === 1) {
          return this.$t('已使用')
        } else if (status === 3) {
          return this.$t('Expired')
        } else {
          return this.$t('Merchandise_removed')
        }
      },

      async init() {
        if (this.$route.query.id == null) {
          return
        }
        return  readCoupon(this.$route.query.id).then(response => {
          this.coupon = response.data.data
        })
        this.listQuery.couponId = this.$route.query.id
        await this.getList()
      },
      getList() {
        this.listLoading = true
        return  listCouponUser(this.listQuery)
          .then(response => {
            this.list = response.data.data.list
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },
      getGoodsList() {
        this.listGoodsLoading = true
       return  listCouponGoods(this.listGoodsQuery)
          .then(response => {
            this.goodsList = response.data.data.list
            for (let i = 0; i < this.goodsList.length; i++) {
              if (this.goodsList[i].shopName == '' || this.goodsList[i].shopName == null) {
                this.goodsList[i].shopName = this.$t('总部')
              }
            }
            this.goodsTotal = response.data.data.total
            this.listGoodsLoading = false
          })
          .catch(() => {
            this.goodsList = []
            this.goodsTotal = 0
            this.listGoodsLoading = false
          })
      },
      getRegionList(){
        this.listRegionsLoading = true
        return listCouponRegions(this.listRegionsQuery)
          .then(response => {
            this.regionsList = response.data.data.list
            this.regionsTotal = response.data.data.total
            this.listRegionsLoading = false
          })
          .catch(() => {
            this.regionsList = []
            this.regionsTotal = 0
            this.listRegionsLoading = false
          })
      },
      getCategoryList() {
        this.listGoodsLoading = true
        return  listCouponCategory(this.listGoodsQuery)
          .then(response => {
            this.goodsList = response.data.data.list
            this.goodsTotal = response.data.data.total
            this.listGoodsLoading = false
          })
          .catch(() => {
            this.goodsList = []
            this.goodsTotal = 0
            this.listGoodsLoading = false
          })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      getTimeScope() {
        if (this.coupon.timeType === 0) {
          return this.$t('领取') + this.coupon.days + this.$t('天有效')
        } else if (this.coupon.timeType === 1) {
          return this.$t('自') + this.coupon.startTime + this.$t('至') + this.coupon.endTime + this.$t('有效')
        } else {
          return this.$t('未知')
        }
      },
      getGoodsScope() {
      },
      qrcode() {//这里是调用的方法
        if (this.coupon.barCode == 0 || !this.coupon.barCode) {
        this.Code = this.coupon.code;
      } else {
        this.Code = this.coupon.barCode;
      }
        this.qrcodeData = new QRCode('qrcode', {
          width: 200, // 设置宽度
          height: 200, // 设置高度
          text: this.Code
        })
      },
      handleQrcode() {
        this.qrcodeDialogVisible = !this.qrcodeDialogVisible
        if (!this.qrcodeData) {
          this.$nextTick(function() {
            this.qrcode()
          })
        }
      },
      getIndex(index) {
        return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit
      }
    }
  }
</script>
<style scoped>
  .filter-container {
    margin-top: 20px;
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
</style>
